<template>
  <LayoutMain>
    <template #main>
      <CustomTable
        ref="multipleTable"
        :columns="currentColumns"
        :data="tableData"
        :row-class-name="rowClassName"
        :col-min-width="120"
        :disabledMove="['sequence', 'imglist']"
        @select="handleSelect"
        @select-all="handleSelectAll"
        @create="handleCreate"
        @sort-row="handleSortRow"
        @sort-column="handleSortColumn"
        @resize-column="handleResizeColumn"
        @sort-change="handleSort"
        @fixed-change="handleFixed"
      >
        <template #remark="{ row }">
          <DivInput :row="row" :columnConfig="columnsMap['remark']" column="remark" @change="handleChage"></DivInput>
        </template>
        <template #created="{ row }">
          <DatetimePopover :row="row" :columnConfig="columnsMap['created']" column="created" @change="handleChage"></DatetimePopover>
        </template>
      </CustomTable>
    </template>
  </LayoutMain>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import LayoutMain from '@/layout/main/index.vue';
import CustomTable from '@/components/customTable/index.vue';
import DivInput from './components/divInput.vue';
import DatetimePopover from './components/datetimePopover.vue';
import { defaultColumns } from './config';

const columnsMap: any = {};
defaultColumns.forEach((item: any) => {
  columnsMap[item.prop] = item;
});

const currentColumns = ref(defaultColumns);
const tableData: any = ref([
  { id: 1001, name: '张三', remark: '无', created: '2025-07-11 12:00:00', checked: false },
  { id: 1002, name: '李四', remark: '无', created: '2025-07-12 12:00:00', checked: false },
  { id: 1003, name: '王五', remark: '无', created: '2025-07-13 12:00:00', checked: false },
  { id: 1004, name: '赵六', remark: '无', created: '2025-07-14 12:00:00', checked: false },
]);

const multipleTable: any = ref();
const multipleSelection = ref([]);
function handleSelect(selection: any) {
  multipleSelection.value = selection;
}
function handleSelectAll(selection: any) {
  multipleSelection.value = selection;
}

function rowClassName({ row, index }: { row: any; index: number }) {
  if (index % 2 !== 0) {
    return 'success-row';
  }
  return '';
}

const initRow = {
  id: '',
  name: '',
  remark: '',
  created: '',
  checked: false,
  auto_flag: true, // 创建记录 标识
};
function handleCreate() {
  const newRow: any = { ...initRow };
  tableData.value.unshift(newRow);
  multipleTable.value.toggleCreate(false);
}

function clearSelection() {
  multipleSelection.value = [];
  multipleTable.value?.clearSelection();
}

function handleSortRow(newRow: any, oldRow: any, data: any) {
  tableData.value = data;
  clearSelection();
}

function handleSortColumn(columns: any) {
  currentColumns.value = columns;
}
function handleSort({ prop, order }: { prop: string; order: string }) {
  console.log(prop, order);
}

function handleFixed(column: any, bool: boolean) {
  currentColumns.value = currentColumns.value.map((item) => {
    if (item.prop == column.prop) {
      item.fixed = bool;
    } else {
      item.fixed = false;
    }
    return item;
  });
}

function handleResizeColumn(columns: any) {
  currentColumns.value = columns;
}

function handleChage(row: any, column: any, value: any) {
  console.log(row, column, value);
  resetTableData();
}

function resetTableData() {
  tableData.value = tableData.value.filter((item: any) => !item.auto_flag);
  multipleTable.value.toggleCreate(true);
}

onMounted(() => {});
</script>

<style lang="scss">
.success-row {
  background-color: #f0f9eb;
}
</style>
